<script lang="ts" setup>
import { onMounted, reactive, Ref, ref } from "vue";
import roleServiceApi from "@/api/modules/org/bean/role";
import appServiceApi from "@/api/modules/org/bean/app";
import { IModelFormExpose, JxtechModelFormCallback } from "@whjxtech/jxtech-component";
//定义事件
const emit = defineEmits<{
  (e: "add-success", data: any, res: any): void; //保存成功回调
  (e: "change-role-type", val: any): void;
}>();

//定义属性
const props = defineProps({
  /**角色id */
  roleId: String
});

//model-form ref对象
const JxtechModelFormRef = ref();

// 管理范围校验，在角色类型是管理类型时才有管理范围
const validateAdminRange = (rule: any, value: any, callback: any) => {
  if (RoleFormData.value.roleType == 1 && (value == "" || value == null)) {
    callback(new Error("请选择管理范围"));
    return;
  }
  callback();
};

const rules = {
  appId: [{ required: true, message: "请选择所属应用", trigger: "blur" }],
  roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  adminRange: [{ required: true, validator: validateAdminRange, trigger: "blur" }]
};
//表单数据
const RoleFormData: Ref<any> = ref({
  roleId: props.roleId
});

//组件对象
const RoleFormState = reactive({
  primaryKey: "roleId",
  formStatus: null,
  appList: [] as Array<any>,
  getJxtechModelFormExpose: (): IModelFormExpose => {
    return JxtechModelFormRef.value as IModelFormExpose;
  },
  /**新增成功 */
  onAddSuccess: (formData: any, res: any) => {
    emit("add-success", formData, res);
  },
  // 角色类型变化响应方法
  changeRoleType: () => {
    emit("change-role-type", RoleFormData.value.roleType);
  },

  // 表单回调函数
  callback: {
    preSave: () => {
      if (RoleFormData.value.roleType != 1) {
        // 非管理角色
        RoleFormData.value.adminRange = null;
      }
    },
    // 初始化时调用 角色类型变化响应方法，提示外部调用者
    afterId: () => {
      emit("change-role-type", RoleFormData.value.roleType);
    }
  }
});

onMounted(() => {
  appServiceApi.queryList().then(res => {
    RoleFormState.appList = res.data as Array<any>;
  });
});

// 对外提供方法
defineExpose({
  save: () => JxtechModelFormRef.value.save(),
  getRoleFormData: () => RoleFormData.value
});
</script>
<template>
  <jxtech-model-form
    ref="JxtechModelFormRef"
    :primary-key="RoleFormState.primaryKey"
    v-model:formStatus="RoleFormState.formStatus"
    :service-api="roleServiceApi"
    :form-data="RoleFormData"
    :rules="rules"
    @add-success="RoleFormState.onAddSuccess"
    :callback="RoleFormState.callback"
  >
    <el-row>
      <el-col :span="21" :offset="1">
        <el-row>
          <el-col :span="12">
            <jxtech-model-form-item label="所属应用" prop="appId">
              <el-select v-model="RoleFormData.appId" placeholder="请选择所属应用" class="w">
                <el-option
                  v-for="item in RoleFormState.appList"
                  :key="item.appId"
                  :label="item.appName"
                  :value="item.appId"
                ></el-option>
              </el-select>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="角色类型" prop="roleType">
              <JxtechDictionarySelectExt
                placeholder="请选择角色类型"
                code-item-id="ROLE_TYPE"
                v-model="RoleFormData.roleType"
                @change="RoleFormState.changeRoleType"
              >
              </JxtechDictionarySelectExt>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <jxtech-model-form-item label="角色名称" prop="roleName">
              <el-input placeholder="请输入角色名称" v-model="RoleFormData.roleName"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="是否公用" prop="common">
              <el-switch
                v-model="RoleFormData.common"
                inline-prompt
                active-text="是"
                inactive-text="否"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <jxtech-model-form-item label="管理范围" prop="adminRange" v-show="RoleFormData.roleType == 1">
              <JxtechDictionarySelectExt
                placeholder="请选择管理范围"
                code-item-id="ADMIN_RANGE"
                v-model="RoleFormData.adminRange"
              ></JxtechDictionarySelectExt>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <jxtech-model-form-item label="角色描述" prop="roleDescription">
              <el-input
                placeholder="请输入角色描述"
                v-model="RoleFormData.roleDescription"
                :autosize="{ minRows: 2, maxRows: 4 }"
                show-word-limit
                maxlength="255"
                type="textarea"
              >
              </el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </jxtech-model-form>
</template>
